<div class="im-ui-wizard">
	<div class="im-ui-wizard-header">
		<div class="im-ui-wizard-title">
			<span class="im-ui-icon-min im-ui-icon-wizard"></span><span>注册向导</span>
		</div>
	</div>
	<div class="im-ui-wizard-body">
		<div class="im-ui-wizard-nav">
			<div class="resTypePage im-font-color-green"><span class=""></span><span>注册</span></div>
			<div class="resContentPage im-font-color-grey"><span></span><span>激活</span></div>
		</div>
		<!--<div class="im-float-clear"></div>-->
		<div class="im-ui-wizard-main">
			<div class="im-ui-wizard-page resType">
				<div style="padding: 50px;">
					<div class="im-wizard-field">
						<span>用户名：</span><input type="text" name="userName" value="用户名" id="userName" />
					</div>			
					<div class="im-wizard-field">
						<span>手机号码：</span><input type="text" name="phoneNumber" value="手机号码" id="phoneNumber" />
					</div>
					<div class="im-wizard-field">
						<span>eMail：</span><input type="text" name="userEmail" value="user@domain.com" id="userEmail" />
					</div>					
				</div>
			</div>
			<div class="im-ui-wizard-page resContent im-display-hide">
				<div>
					<span>用户名</span>
				</div>
			</div>			
		</div>
	</div>
	<div class="im-ui-wizard-footer">
		<div class="im-ui-wizard-fbar">
			<input class="btn im-btn-prev" type="button" disabled="disabled" value="上一步">
			<input class="btn im-btn-next" type="button" value="下一步">
			<input class="btn im-btn-ok" type="button" disabled="disabled" value="确定">
			<input class="btn im-btn-ccel" type="button" value="取消">
		</div>
	</div>
</div>
<script>
	var form = {
		isValid: false,
		user: '',
		phone: '',
		email: ''
	};
	$(document).delegate ('#userName', 'focus', function () {
		var userName = $('#userName').val();
		if (userName == '用户名') {
			$('#userName').val('');
		}
		//console.log('focus');
	});
	$(document).delegate ('#userName', 'keyup blur', function () {
		var p = $(this).next ();
		if (p.length == 0) {
			p = $('<div class="im-field-error"></div>').hide ();
			$(this).after (p);
		}	
		if ($.trim ($(this).val ()) == '') {
			form.isValid = false;
			$(this).addClass ('invalidate');
			p.html ('用户名不能为空').show ();
		}
		else if ($(this).val ().length > 30 || $(this).val ().length < 3 || /[\~`!@#\$&%,\.;:]/.test ($(this).val ())) {
			form.isValid = false;
			$(this).addClass ('invalidate');
			p.html ('用户名长度3-30').show ();
		}
		else {
			form.isValid = true;
			form.user = $(this).val();
			p.hide();
		}
	});
	$(document).delegate ('#phoneNumber', 'focus', function () {
		var phoneNumber = $('#phoneNumber').val();
		if (phoneNumber == '手机号码') {
			$('#phoneNumber').val('');
		}
		//console.log('focus');
	});
	$(document).delegate ('#phoneNumber', 'keyup blur', function () {
		var p = $(this).next ();
		if (p.length == 0) {
			p = $('<div class="im-field-error"></div>').hide ();
			$(this).after (p);
		}	
		if ($.trim ($(this).val ()) == '') {
			form.isValid = false;
			$(this).addClass ('invalidate');
			p.html ('手机号码不能为空').show ();
		}
		//else if ($(this).val ().length > 30 || $(this).val ().length < 3 || /[\~`!@#\$&%,\.;:]/.test ($(this).val ())) {
			//$(this).addClass ('invalidate');
			//p.html ('手机号码长度3-30。').show ();
		//}
		else {
			form.isValid = true;
			form.phone = $(this).val();
			p.hide();
		}
	});
	/* var togglePage = function (index, cls) {
		if ($(cls).is('.im-font-color-grey')) {
			return 'im-font-color-green';
		}
		return 'im-font-color-grey';
	} */
	$(document).delegate ('input.im-btn-next', 'click', function () {
		if (form.isValid) {
			$("input.im-btn-prev").removeAttr("disabled");
			$("input.im-btn-next").attr("disabled", "disabled");
			$("div.resType").addClass("im-display-hide");
			$("div.resContent").removeClass("im-display-hide");
			
			$("div.resTypePage").removeClass('im-font-color-green').addClass('im-font-color-grey');
			$("div.resContentPage").removeClass('im-font-color-grey').addClass('im-font-color-green');
			//$("div.resContentPage").toggleClass(togglePage);
			//$("div.resContentPage").removeClass("im-font-color-green");			
		}
	});
	$(document).delegate ('input.im-btn-prev', 'click', function () {
		if (form.isValid) {
			$("input.im-btn-prev").attr("disabled", "disabled");
			$("input.im-btn-next").removeAttr("disabled");
			$("div.resContent").addClass("im-display-hide");
			$("div.resType").removeClass("im-display-hide");
			
			$("div.resContentPage").removeClass('im-font-color-green').addClass('im-font-color-grey');
			$("div.resTypePage").removeClass('im-font-color-grey').addClass('im-font-color-green');
			//$("div.resContentPage").toggleClass(togglePage);
			//$("div.resContentPage").removeClass("im-font-color-green");			
		}
	});
	$(document).delegate ('input.im-btn-ccel', 'click', function () {
		if (form.isValid) {
			$("input.im-btn-prev").attr("disabled", "disabled");
			$("input.im-btn-next").removeAttr("disabled");
			$("div.resContent").addClass("im-display-hide");
			$("div.resType").removeClass("im-display-hide");
			
			$("div.resContentPage").removeClass('im-font-color-green').addClass('im-font-color-grey');
			$("div.resTypePage").removeClass('im-font-color-grey').addClass('im-font-color-green');
			//$("div.resContentPage").toggleClass(togglePage);
			//$("div.resContentPage").removeClass("im-font-color-green");			
		}
	});		
</script>